import React from 'react';
import "./index.less"
import {
    SearchBar,
    InputItem,
    List,
    WingBlank,
    Carousel,
    TabBar,
    Button,
} from 'antd-mobile';
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'


export default class ClassifyPayOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 0,
            data: Array.from(new Array(4)).map(() => ({
                icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
            })),
            goodInfo: new Array(20).fill(0)
        }
    }

    componentDidMount() {
        this.props.location.state ? this.setState({
            id: this.props.location.state.id
        }): null
    }

    onChange = (value) => {
        this.setState({ value });
    };

    tabClick = (index) => {
        this.setState({
            tabIndex: index
        })
    };

    // 返回上一页
    addVConsolePackage = () => {
        this.props.history.goBack()
    };


    render() {
        return (
            <div className="classifyPayOrder">
                <TopBarExample title={'确认订单'} autoBack={this.addVConsolePackage} showBack={true}></TopBarExample>
                <div className="address">
                    <div className="item-left">
                        <div className="item-left-left">
                            <div>
                                河南省&nbsp;&nbsp;郑州市
                            </div>
                            <div style={{marginTop: '6px', color: '#b2b2b2'}}>
                                讲女士 23123232323
                            </div>
                        </div>
                        <div className="item-left-right"></div>
                    </div>
                    <div className="item-right">
                        <div className="item-right-top" style={{color: '#50db93'}}><span>✓</span>自提</div>
                        {/*<div className="item-right-bottom" style={{marginTop: '6px', color: '#b2b2b2'}}><span>✓</span>配送</div>*/}
                    </div>
                </div>
                <div className="addressBg"></div>
                <div className="good">
                    <div className="good-time">
                        <div>门店自提</div>
                        <div style={{color: '#50db93'}}>自提时间：9.00：18.00</div>
                    </div>
                    <div className="good-img">
                        <div className="img-list">
                            <img
                                src={`https://zos.alipayobjects.com/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png`}
                                alt=""
                                style={{ width: '100px', height: '100px',}}
                                onLoad={() => {
                                    // fire window resize event to change height
                                }}
                            />
                            <img
                                src={`https://zos.alipayobjects.com/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png`}
                                alt=""
                                style={{ width: '100px', height: '100px',}}
                                onLoad={() => {
                                    // fire window resize event to change height
                                }}
                            />
                        </div>
                        <div style={{color: '#b2b2b2', margin: 'auto 0'}}>共2件</div>
                    </div>
                </div>
                <div className="price">
                    <div className="price-item">
                        <div>订单总额</div>
                        <div style={{fontWeight: 600}}>39.66</div>
                    </div>
                    <div className="price-item">
                        <div>订单总额</div>
                        <div style={{fontWeight: 600, color: 'red', display: 'flex'}}>
                            <span>123</span>
                            <div className="icon"></div>
                        </div>
                    </div>
                    <div className="price-item">
                        <div>订单总额</div>
                        <div style={{fontWeight: 600}}>39.66</div>
                    </div>
                </div>
                <div className="ps">
                    <div style={{fontWeight: 600}}>
                        <span>备注：</span>
                        <span style={{fontSize: '12px', color: '#b6b6b6'}}>商品补充说明</span>
                    </div>
                    <div className="content">请上午送货</div>
                </div>

                <div className="foot">
                    <div className="foot-tab">
                        <div className="foot-tab-top">
                            <div style={{fontWeight: 600}}>合计</div>
                            <div style={{color: 'red', marginLeft: '10px'}}>399</div>
                        </div>
                        <div style={{color: '#b6b6b6', fontSize: '14px'}}>已优惠3.00</div>
                    </div>
                    <div className="foot-button" onClick={() => {this.nowPay(0)}} style={{backgroundColor: '#50db93', color: 'white'}}>提交订单</div>
                </div>
                {/*<TabBarExample selectedTab={'classify'}></TabBarExample>*/}
            </div>
        );
    }
}

